<template>
  <van-sticky :offset-top="0">
    <div class="bg-white search-header">
      <div class="text-center text-dark line50 font18">搜索</div>
      <div class="flex-row justify-around p_x10 p_y10">
        <div class="flex-row flex1 m_r10 justify-center align-center input-container">
          <div class="flex" style="width: 1.5rem">
            <van-icon name="search" class="text-light m_t2" size="1.2rem"/>
          </div>
          <input class="flex flex1 search-input" v-model="keyword" placeholder="搜索商品"/>
          <van-icon v-show="keyword.length"
                    name="clear"
                    @click="()=>keyword=''"
                    class="text-light m_t2"
                    size="1.2rem"/>
        </div>
        <van-button type="danger" round size="small" class="font14" @click="onSearch">搜 索</van-button>
      </div>
    </div>
  </van-sticky>
  <div class="flex-row justify-between p_x10 p_y10 search-tools">
    <div class="text-dark m_t5 font16">历史记录</div>
    <van-icon name="delete-o" size="1.5rem" class="text-light" @click="onDestroyHistory"/>
  </div>
  <div class="flex-row flex-wrap search-history">
    <div class="keyword"
         :key="`keyword-item-${i}`"
         @click="onCheckKeyword(item)"
         v-for="(item,i) of historyKeywords">{{ item }}
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {Dialog, Toast} from "vant";
import {isEmpty} from "@/utils/helpers";

export default defineComponent({
  name: "Search",
  data() {
    return {
      keyword: '',
      historyKeywords: [
        '芒果', '雅诗兰黛', 'chanel'
      ],
    }
  },
  methods: {
    onCheckKeyword(keyword: string) {
      this.keyword = keyword
      this.onSearch();
    },
    onSearch() {
      const keyword = this.keyword;
      if (isEmpty(keyword)) {
        return Toast('请输入搜索关键词');
      }
      this.$router.push({name: 'searchResults', query: {keyword}})
    },
    async onDestroyHistory() {
      try {
        await Dialog.confirm({
          message: '确认清除历史记录？',
        })
        console.log('清除历史搜索记录')
      } catch (e) {

      }
    }
  }
})
</script>

<style lang="less" scoped>
.search-header {
  .input-container {
    background-color: #F6F6F6;
    width: 70%;
    height: 38px;
    border-radius: 30px;
    padding: 0 10px;
    line-height: 26px;

    .search-input {
      border-width: 0;
      background-color: #F6F6F6;
    }
  }
}

.search-history {
  padding: 5px 15px;

  .keyword {
    background-color: #ffffff;
    line-height: 25px;
    border-radius: 30px;
    color: #666;
    margin: 3px;
    padding: 0 10px;
  }
}
</style>